html,
body {
    padding: 0;
    margin: 0;
    font-size: 13.33333333vw;
    background-color: #f5f5f5;
    max-width: 100%;
}

html.white,
body.white {
    background-color: #fff;
}

html.white body,
body.white body {
    background-color: #fff;
}

* {
    line-height: 1;
    font-size: .28rem;
    box-sizing: border-box;
    font-family: 'Microsoft Yahei';
}

/* .vm{
  position: fixed;
  left: 0;
  top: 0;

} */

input {
    -webkit-appearance: none;
    outline: none;
    border: 0;
}

img {
    max-width: 100%;
    height: auto;
}

.wrap {
    background-color: #fff;
    /* overflow: scroll */
}

.wrap .ofh {
    overflow: hidden;
}

.wrap .fl {
    float: left;
}

.wrap .fr {
    float: right;
}

.wrap .f22 {
    font-size: .22rem;
}

.wrap .f24 {
    font-size: .24rem;
}

.wrap .f26 {
    font-size: .26rem;
}

.wrap .f30 {
    font-size: .3rem;
}

.wrap .f32 {
    font-size: .32rem;
}

.wrap .f36 {
    font-size: .36rem;
}

.wrap .f38 {
    font-size: .38rem;
}

.wrap .f46 {
    font-size: .46rem;
}

.wrap .f48 {
    font-size: .48rem;
}

.wrap .f60 {
    font-size: .6rem;
}

.wrap .f80 {
    font-size: .8rem;
}

.wrap .white {
    color: #fff;
}

.wrap .orange {
    color: #fe5933;
}

.wrap .blue {
    color: #29a7e1;
}

.wrap .purple {
    color: #ea10d1;
}

.wrap .gray {
    color: #bdbdbd;
}

.wrap .yellow {
    color: #ff0;
}

.wrap .one {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.wrap .btn {
    cursor: pointer;
}

.couponAlert {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.couponAlert>div {
    width: 5.69rem;
    height: 6.76rem;
    background-color: #ea10d1;
    background: -webkit-linear-gradient(left top, #dc41fd, #db20c1);
    background: -o-linear-gradient(left top, #dc41fd, #db20c1);
    background: -moz-linear-gradient(left top, #dc41fd, #db20c1);
    background: linear-gradient(left top, #dc41fd, #db20c1);
    background: url(../image//window_bg1@2x.png) no-repeat;
    background-repeat: round;
    border-radius: .25rem;
    padding: .6rem 0;
    position: relative;
    top: -0.6rem;
}

.couponAlert>div>div {
    margin: 0 auto;
    max-width: 5.5rem;
}

.couponAlert>div>div.f36 {
    margin-bottom: .2rem;
}

.couponAlert>div .white {
    text-align: center;
    line-height: 1.2;
}

.couponAlert>div .white.w {
    line-height: 1.5;
}

.couponAlert>div>.gray {
    position: absolute;
    top: 3.52rem;
    left: 0.9rem;
    color: #fff;
    font-family: 'PingFang-SC-Regular';
}

.couponAlert .alertCoupon .l .f60 {
    color: #FF1A00;
    font-size: 0.62rem;
    font-weight: 900;
}

.couponAlert .alertCoupon {
    width: 4.15rem;
    height: 0.93rem;
    background-image: url(../image/quan@2x.png);
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .2rem;
    position: absolute;
    top: 2.28rem;
    left: 0.77rem;
}

.couponAlert .alertCoupon .l {
    width: 3.1rem;
    text-align: center;
}

.couponAlert .alertCoupon .l .f60 {
    padding: .1rem 0;
}

.couponAlert .alertCoupon .r {
    width: 1.1rem;
}

.couponAlert .had {
    display: block;
    width: 2.4rem;
    margin: 0 auto .3rem;
}

.couponAlert .yellowBtn {
    width: 3.2rem;
    height: 0.96rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ff0;
    color: #FF1A00;
    font-size: .36rem;
    margin: .3rem auto 0;
    border-radius: 1.1rem;
    cursor: pointer;
    position: absolute;
    bottom: 1.66rem;
    left: 1.2rem;
}

.couponAlert .BtnHide {
    width: 0.54rem;
    height: 0.54rem;
    background: url(../image/hide@2x@2x.png) no-repeat;
    background-repeat: round;
    position: absolute;
    bottom: -0.6rem;
    left: 2.5rem;
}

#course .title {
    font-size: .38rem;
    color: #282828;
    padding-top: .22rem;
    padding-left: .3rem;
    position: relative;
}

#course .title:before {
    content: '';
    width: .2rem;
    height: .3rem;
    position: absolute;
    left: 0;
    top: .3rem;
    background-color: #29a7e1;
}

#course .content {
    padding: .3rem;
    font-size: .28rem;
    color: #8c8c8c;
    line-height: 1.5;
}

#course .img {
    width: 100%;
    height: 4.2rem;
}

#course .img img {
    display: block;
    width: 100%;
    height: 100%;
}

#course .blueBg {
    background-color: #29a7e1;
    width: 100%;
}

#course .blueBg .fl {
    width: 50%;
    height: 1rem;
    line-height: 1rem;
    color: #fff;
    font-size: .32rem;
    text-align: center;
}

#course .blueBg .fl:first-child {
    position: relative;
}

#course .blueBg .fl:first-child:before {
    content: '';
    width: 1px;
    height: .7rem;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: #fff;
}

#course .htmlContent {
    border-top: 0.2rem solid #f5f5f5;
    background-color: #fff;
    padding-bottom: .2rem;
}

#course .htmlContent .imgBor {
    padding: .2rem .2rem 0;
}

#course .htmlContent img {
    display: block;
    width: 100%;
}

#course .htmlContent .htmlTitle {
    height: .94rem;
    line-height: .9rem;
    font-size: .32rem;
    text-align: center;
    border-bottom: 0.04rem solid #29a7e1;
}

#course .htmlContent .blueBtn {
    width: 5.6rem;
    height: .9rem;
    line-height: .9rem;
    background-color: #29a7e1;
    color: #fff;
    border-radius: .9rem;
    text-align: center;
    font-size: .32rem;
    margin: .2rem auto 0;
}

#audio .download {
    width: 100%;
    height: 1rem;
    position: fixed;
}

#audio .download img {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
}

#audio .mainImg {
    width: 100%;
    height: 4.2rem;
    margin-top: 1rem
}

#audio .mainImg img {
    display: block;
    width: 100%;
}

#audio .courseDetail {
    padding-bottom: 1.2rem;
}

#audio .courseDetail .courseSelect>div {
    text-align: center;
    font-size: .3rem;
    color: #000;
    height: .9rem;
    line-height: .86rem;
    border-bottom: .04rem solid #fff;
}

#audio .courseDetail .courseSelect>div.active {
    border-color: #40a1ff;
}

#audio .courseDetail .courseSelect .fl {
    width: 50%;
}

#audio .courseDetail .courseTitle {
    height: 1rem;
    line-height: 1rem;
    font-size: .36rem;
    color: #282828;
    padding: 0 .3rem;
}

#audio .courseDetail .courseSubTitle {
    height: .6rem;
    line-height: 1;
    font-size: .24rem;
    color: #999;
    padding: 0 .3rem;
}

#audio .courseDetail .safeguard {
    border-top: .2rem solid #f0f0f0;
}

#audio .courseDetail .safeguard div {
    height: .9rem;
    line-height: .9rem;
    padding-left: .85rem;
    padding-right: .2rem;
    font-size: .24rem;
    color: #282828;
    -webkit-background-size: .35rem auto;
    background-size: .35rem auto;
    background-position: .3rem center;
    background-repeat: no-repeat;
}

#audio .courseDetail .safeguard div.icon-pay {
    background-image: url(../image/icon_bao.png);
}

#audio .courseDetail .safeguard div.icon-forever {
    background-image: url(../image/icon_yong.png);
}

#audio .courseDetail .courseContent {
    border-top: .2rem solid #f0f0f0;
    padding: .2rem;
}

#audio .courseDetail .courseContent img {
    width: 100%;
    display: block;
}

#audio .content {
    padding-bottom: 1rem;
    border-top: .1rem solid #f0f0f0;
}

#audio .bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1rem;
}

#audio .bottom div {
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    color: #fff;
    font-size: .3rem;
}

#audio .bottom .fl.blue {
    width: 40%;
}

#audio .bottom .fl.yellow {
    width: 60%;
}

#audio .blue {
    background-color: #40a1ff;
}

#audio .yellow {
    background-color: #ff9600;
}

#audio .videoList {
    padding: .3rem;
}

#audio .videoList>div {
    width: 7rem;
    margin: 0 auto;
    background-color: #e7e7e7;
    padding: .25rem .2rem .25rem .3rem;
    border-bottom: .2rem solid #fff;
    position: relative;
}

#audio .videoList .fonts {
    width: 5.1rem;
    padding-left: 1.1rem;
}

#audio .videoList .fonts .t {
    font-size: .24rem;
    color: #282828;
    line-height: 1.5;
}

#audio .videoList .fonts .time {
    padding-top: .1rem;
}

#audio .videoList .fonts .time span {
    color: #8c8c8c;
    font-size: .18rem;
}

#audio .videoList .fonts .time span:nth-child(2) {
    margin-left: .6rem;
}

#audio .videoList .fonts .time img {
    width: .5rem;
    margin-left: .2rem;
}

#audio .videoList .whiteBtn,
#audio .videoList .imgBtn {
    position: absolute;
    top: 0;
    height: 100%;
}

#audio .videoList .whiteBtn div,
#audio .videoList .imgBtn div {
    display: table;
    height: 100%;
}

#audio .videoList .whiteBtn div div,
#audio .videoList .imgBtn div div {
    display: table-cell;
    vertical-align: middle;
}

#audio .videoList .whiteBtn {
    right: .2rem;
    width: 1.2rem;
}

#audio .videoList .imgBtn {
    left: .3rem;
    width: .6rem;
}

#audio .pay {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

#audio .pay .bor {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5.3rem;
    background-color: #fff;
}

#audio .pay .bor .payTitle {
    width: 6.5rem;
    height: 1rem;
    line-height: 1rem;
    padding-left: .3rem;
    padding-right: 3em;
    font-size: .3rem;
    color: #282828;
    position: relative;
}

#audio .pay .bor .payTitle span {
    width: 3em;
    height: 1rem;
    line-height: 1rem;
    position: absolute;
    right: 0;
    top: 0;
    font-size: .3rem;
    color: #ff9600;
}

#audio .pay .bor .cancel {
    position: absolute;
    top: 0;
    right: 0;
    width: 1rem;
    height: 1rem;
    background-image: url(../image/cancel.png);
    -webkit-background-size: .33rem auto;
    background-size: .33rem auto;
    background-repeat: no-repeat;
    background-position: center center;
}

#audio .pay .bor .type {
    border-bottom: 1px solid #e6e6e6;
}

#audio .pay .bor .type div {
    height: 1.4rem;
    line-height: 1.4rem;
    padding-left: 1.8rem;
    border-top: 1px solid #e6e6e6;
    font-size: .3rem;
    color: #282828;
    -webkit-background-size: 1rem auto;
    background-size: 1rem auto;
    background-repeat: no-repeat;
    background-position: .3rem center;
    position: relative;
}

#audio .pay .bor .type div.wx {
    background-image: url(../image/pay_wx.png);
}

#audio .pay .bor .type div.alipay {
    background-image: url(../image/pay_zfb.png);
}

#audio .pay .bor .type div:before {
    content: '';
    width: 1rem;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background-image: url(../image/icon_check.png);
    -webkit-background-size: .4rem auto;
    background-size: .4rem auto;
    background-repeat: no-repeat;
    background-position: center center;
}

#audio .pay .bor .type div.active:before {
    background-image: url(../image/icon_checked.png);
}

#audio .pay .bor .tips {
    padding: .3rem;
    position: relative;
}

#audio .pay .bor .tips .f {
    width: 4rem;
    font-size: .2rem;
    color: #999;
    line-height: 1.5;
}

#audio .pay .bor .tips .btn {
    width: 1.6rem;
    height: .6rem;
    line-height: .6rem;
    color: #fff;
    text-align: center;
    font-size: .3rem;
    position: absolute;
    top: 0;
    bottom: 0;
    right: .3rem;
    margin: auto;
    border-radius: .1rem;
}

#audio .payFinished {
    display: none;
}

#audio .payFinished img {
    width: 3.8rem;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

#audio .detailTitle {
    line-height: 1rem;
    padding: 0 .3rem;
    font-size: .3rem;
}

#audio .detailTime {
    height: .6rem;
    font-size: .26rem;
    color: #999;
    padding: 0 .3rem;
}

#audio .audio {
    width: 7.1rem;
    height: 1.5rem;
    border: 1px solid #999;
    background-color: #e7e7e7;
    margin: 0 auto;
    position: relative;
}

#audio .audio audio {
    display: none;
}

#audio .audio .btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 1.7rem;
    height: 100%;
}

#audio .audio .btn img {
    width: .9rem;
    position: absolute;
    left: .3rem;
    top: 0;
    bottom: 0;
    margin: auto;
}

#audio .audio .fonts {
    padding: 0 .3rem 0 1.7rem;
    color: #282828;
}

#audio .audio .fonts .one {
    padding-top: .3rem;
    padding-bottom: .25rem;
}

#audio .audio .fonts .f span {
    font-size: .24rem;
    color: #999;
}

#audio .audio .fonts .f span:last-child {
    margin-left: .7rem;
}

#audio .detailContent {
    padding: .7rem .3rem;
}

#audio .detailContent img {
    max-width: 100%;
}

#buy .course .ofh {
    padding: .3rem .2rem .2rem;
}

#buy .course .ofh img {
    width: 2.2rem;
}

#buy .course .ofh .fl:nth-child(2) {
    padding: .6rem 0 0 .2rem;
}

#buy .course .ofh .courseTitle {
    color: #282828;
    line-height: 1.5;
}

#buy .course .ofh .price {
    font-size: .3rem;
    color: #ff6f3c;
    padding-top: .6rem;
}

#buy .tips {
    font-size: .2rem;
    color: #999;
    line-height: 1.5;
    border-top: 1px solid #999;
    padding-top: .3rem;
    margin: 0 .2rem;
}

#buy .btn {
    width: 3.6rem;
    height: .8rem;
    line-height: .8rem;
    text-align: center;
    font-size: .3rem;
    color: #fff;
    margin: .7rem auto 0;
    border-radius: .8rem;
}

#buy .btn.success,
#buy .btn.pay {
    background-color: #75c621;
}

#buy .btn.download {
    background-color: #0084FF;
}

#buy .btn.alread {
    background-color: #ff9600;
}

#buy .success {
    padding-top: .8rem;
    text-align: center;
}

#buy .success img {
    width: 1.5rem;
}

#buy .success .f36 {
    padding-top: .6rem;
}

#buy .success .f30 {
    padding-top: .5rem;
}

#buy .success .btn {
    margin-top: .8rem;
}

#login .login {
    padding-top: 1.6rem;
}

#login .register {
    padding-top: 1.4rem;
}

#login .register .fonts {
    color: #282828;
    font-size: .36rem;
    text-align: center;
    padding-bottom: 1.1rem;
}

#login .register .tips {
    margin-top: .2rem;
    text-align: center;
    font-size: .24rem;
    color: #282828;
}

#login .register .tips span {
    font-size: .24rem;
    color: #64b3f1;
}

#login .input {
    width: 6rem;
    height: .9rem;
    border-radius: .9rem;
    margin: 0 auto;
    border: 1px solid #e6e6e6;
    background-color: #fff;
    position: relative;
    overflow: hidden;
}

#login .input.mt20 {
    margin-top: .2rem;
}

#login .input input {
    width: 100%;
    height: 100%;
    padding: 0 .45rem;
}

#login .input .getCode {
    width: 1.8rem;
    height: .7rem;
    line-height: .7rem;
    text-align: center;
    background-color: #73baff;
    color: #fff;
    font-size: .3rem;
    border-radius: .7rem;
    position: absolute;
    top: 0;
    right: .1rem;
    bottom: 0;
    margin: auto;
}

#login .input .getCode.disabled {
    background-color: #999;
}

#login .btn {
    width: 6rem;
    height: .9rem;
    line-height: .9rem;
    border-radius: .9rem;
    background-color: #2ca6e0;
    color: #fff;
    font-size: .36rem;
    text-align: center;
    margin: 1.3rem auto 0;
}

#toast-message {
    display: inline-block;
    max-width: 80%;
    text-align: center;
    font-size: .3rem;
    line-height: 1.5;
    padding: .2rem;
    background-color: rgba(50, 50, 50, 0.9);
    border-radius: 5px;
    color: white;
    position: fixed;
    bottom: 50%;
    right: 50%;
    -webkit-transform: translate3d(50%, 50%, 0);
    -moz-transform: translate3d(50%, 50%, 0);
    -ms-transform: translate3d(50%, 50%, 0);
    -o-transform: translate3d(50%, 50%, 0);
    transform: translate3d(50%, 50%, 0);
    z-index: 1002;
}

#loading {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background-color: #fff;
}

.load-spinner {
    width: 200px !important;
    height: 200px !important;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    position: absolute;
    right: 50%;
    bottom: 50%;
    z-index: 1;
    -webkit-transform: translate3d(50%, 50%, 0) scale(0.5);
    -moz-transform: translate3d(50%, 50%, 0) scale(0.5);
    -ms-transform: translate3d(50%, 50%, 0) scale(0.5);
    -o-transform: translate3d(50%, 50%, 0) scale(0.5);
    transform: translate3d(50%, 50%, 0) scale(0.5);
}

.load-spinner:after {
    content: 'åŠ è½½ä¸­';
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 25px;
    text-align: center;
    color: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
}

.load-spinner div {
    left: 94px;
    top: 48px;
    position: absolute;
    -webkit-animation: spinner linear 1s infinite;
    animation: spinner linear 1s infinite;
    background: #fff;
    width: 12px;
    height: 24px;
    border-radius: 40%;
    -webkit-transform-origin: 6px 52px;
    transform-origin: 6px 52px;
}

.load-spinner div:nth-child(1) {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-animation-delay: -0.91666667s;
    animation-delay: -0.91666667s;
}

.load-spinner div:nth-child(2) {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
    -webkit-animation-delay: -0.83333333s;
    animation-delay: -0.83333333s;
}

.load-spinner div:nth-child(3) {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-animation-delay: -0.75s;
    animation-delay: -0.75s;
}

.load-spinner div:nth-child(4) {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-animation-delay: -0.66666667s;
    animation-delay: -0.66666667s;
}

.load-spinner div:nth-child(5) {
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg);
    -webkit-animation-delay: -0.58333333s;
    animation-delay: -0.58333333s;
}

.load-spinner div:nth-child(6) {
    -webkit-transform: rotate(150deg);
    transform: rotate(150deg);
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}

.load-spinner div:nth-child(7) {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-animation-delay: -0.41666667s;
    animation-delay: -0.41666667s;
}

.load-spinner div:nth-child(8) {
    -webkit-transform: rotate(210deg);
    transform: rotate(210deg);
    -webkit-animation-delay: -0.33333333s;
    animation-delay: -0.33333333s;
}

.load-spinner div:nth-child(9) {
    -webkit-transform: rotate(240deg);
    transform: rotate(240deg);
    -webkit-animation-delay: -0.25s;
    animation-delay: -0.25s;
}

.load-spinner div:nth-child(10) {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    -webkit-animation-delay: -0.16666667s;
    animation-delay: -0.16666667s;
}

.load-spinner div:nth-child(11) {
    -webkit-transform: rotate(300deg);
    transform: rotate(300deg);
    -webkit-animation-delay: -0.08333333s;
    animation-delay: -0.08333333s;
}

.load-spinner div:nth-child(12) {
    -webkit-transform: rotate(330deg);
    transform: rotate(330deg);
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

@keyframes spinner {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes spinner {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.rukouimg {
    width: 1.36rem;
    height: 1.45rem;
}